<template>
	<view class="content">
		<!-- <view class="header">
			<view class="left" @click="gotoDetail('add')">新建<u-icon name="plus-circle" size="44"></u-icon></view>
			<view class="center">个人商机</view>
			<view class="right"></view>
		</view> -->
		<view class="search-box">
			<u-search placeholder="请输入客户名称" v-model="keyword" @search="getOppoList" @custom="getOppoList"></u-search>
		</view>
		<view style="height: calc(100% - 170rpx);overflow-y: scroll;">
			<u-card :title="item.cusName" :sub-title="item.biz1" @click="gotoDetail('detail',item)" v-for="(item,index) of sjList" :key="index">
				<view class="" slot="body">
					<view class="u-body-item u-flex u-row-between u-p-b-0">
						<view class="u-body-item-title u-line-2">
							<view>商机类型：{{item.busiOppoType}}</view>
							<view>客户：{{item.cusName}}</view>
						</view>
						<view class="u-body-item-title u-line-2">
							<view>提出人：{{item.biz2}}</view>
							<view>当前跟踪人：{{item.biz3}}</view>
						</view>
						<view class="u-body-item-title u-line-2">
							<view>客户状态：{{item.statusName}}</view>
						</view>
					</view>
				</view>
				<view class="foot" slot="foot">
					<view class="foot-left">
						<u-button type="primary" size="medium" @click="gotoGress(item)">商机跟进</u-button>
					</view>
					<!-- <view class="foot-right">
						<u-button size="medium" @click="sjDelete(item)">删除</u-button>
					</view> -->
					<view class="foot-right">
						<u-button size="medium" @click="contrl(item)">操作</u-button>
					</view>
				</view>
			</u-card>
			<u-empty text="暂无商机" mode="list" v-if="sjList.length === 0"></u-empty>
		</view>
		<!-- 底部按钮 -->
		<view class="footer">
			<u-button type="primary" @click="gotoDetail('add')">新建商机</u-button>
			<u-button type="success" @click="gotoGH()" style="margin-left: 20rpx;">公海商机</u-button>
		</view>
		<u-select v-model="ctrlShow" :list="ctrlList" @confirm="ctrlConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sjList: [],
				ctrlShow: false,
				chooseSj: null,
				keyword: '',
				ctrlList: [
					{
						value: '0',
						label: '转到公海'
					},
					{
						value: '1',
						label: '删除'
					},
					// {
					// 	value: '2',
					// 	label: '下订单'
					// },
					{
						value: '3',
						label: '转正式客户'
					}
				]
			};
		},
		onShow() {
			this.getOppoList();
		},
		methods: {
			gotoDetail(type,row){
				uni.setStorageSync('OppoDetail', row);
				uni.navigateTo({
					url: '/pages/busi/busi-detail?mode=' + type
				})
			},
			gotoGH(){
				uni.navigateTo({
					url: '/pages/busi/index'
				});
			},
			gotoGress(item){
				uni.navigateTo({
					url: '/pages/busi/progress?crmBusiOppo=' + item.id
				})
			},
			contrl(item){
				this.ctrlShow = true;
				this.chooseSj = item;
			},
			ctrlConfirm(params){
				console.log(params);
				if(params[0].value === '0'){
					this.zghFun(this.chooseSj)
				}
				if(params[0].value === '1'){
					this.sjDelete(this.chooseSj)
				}
				if(params[0].value === '2'){
					uni.navigateTo({
						url: '/pages/order/order?cusCode=' + this.chooseSj.cusCode
					});
				}
				if(params[0].value === '3'){
					this.$api.user.genCustInfo({
						...this.chooseSj
					}).then((res) => {
						console.log("res",res);
						uni.showToast({
							title: '转正式客户成功',
							icon: 'success'
						})
						setTimeout(() => {
							this.getOppoList()
						}, 1500)
					})
				}
			},
			zghFun(item){
				this.$api.user.retunPublicBusiOppo(item).then((res) => {
					console.log("res",res);
					uni.showToast({
						title: '转移成功',
						icon: 'success'
					})
					this.getOppoList()
				})
			},
			sjDelete(item){
				// if(item.cusStatus !== '1'){
				// 	uni.showToast({
				// 		title: '商机已分配，无法删除',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.$api.user.deleteOppo(item.id).then((res) => {
					console.log("res",res);
				})
				setTimeout(() => {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
					this.getOppoList()
				}, 1500)
			},
			getOppoList(){
				this.$api.user.getOppo({
					current: 1,
					size: 100,
					cusName: this.keyword,
					busiOppoType: "私海"
				}).then((res) => {
					console.log("res",res.records);
					this.sjList = res.records;
					this.sjList.forEach((item) => {
						switch (item.cusStatus) {
							case "1":
								item.statusName = "未分配";
								break;
							case "2":
								item.statusName = "跟踪中";
								break;
							case "3":
								item.statusName = "已转化";
								break;
							case "4":
								item.statusName = "已签单";
								break;
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		display: flex;
		height: 100rpx;
		margin-top: var(--status-bar-height);
		.right{
			width: 20%;
		}
		.center{
			width: 60%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			font-size: 40rpx;
		}
		.left{
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #2b85e4;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.content{
		height: calc(100vh - 120rpx);
		overflow-y: scroll;
		
	}
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 10rpx 0rpx;
		display: flex;
		flex-direction: column;
	}
	::v-deep .u-card__head--left__title{
		font-weight: bold !important;
		font-size: 32rpx !important;
	}
	.u-body-item-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-size: 28rpx;
		margin: 10rpx 0;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
	.foot{
		height: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.u-card{
		margin-top: 0 !important;
	}
	.footer {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 999;
	}
	.search-box{
		height: 60rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
</style>
